<template>
  <div class="container">
    <!-- 添加目录对话框 -->
    <el-dialog
      :title="titles"
      width="400px"
      :visible="showDialog"
      @close="close"
    >
      <el-form label-width="80px" :model="formData" :rules="rules" ref="formData">
        <el-form-item label="所属学科" prop="subjectID">
          <el-select
            size="small"
            placeholder="请选择"
            style="width: 280px"
            v-model="formData.subjectID"
          >
          <el-option v-for="(item,index) in selectList" :key="index" :value="item.value" :label="item.label"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="目录名称" prop="directoryName">
          <el-input
            size="small"
            placeholder="请输入目录名称"
            style="width: 280px"
             v-model="formData.directoryName"
          ></el-input>
        </el-form-item>
        <!-- 按钮 -->
        <el-form-item>
          <el-row type="flex" justify="end" style="margin-top:30px ;margin-bottom:-30px">
            <el-button @click="close">取消</el-button>
            <el-button type="primary" @click="subitClick">确认</el-button>
          </el-row>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
// 引入简单列表
import { simple } from '@/api/hmmm/subjects.js'
// 引入添加目录+目录详情+修改
import { add, detail, update } from '@/api/hmmm/directorys.js'
export default {
  props: {
    showDialog: {
      type: Boolean,
      default: false
    },
    currentId: {
      type: Number,
      default: null
    },
    directList: {
      type: Array,
      default: null
    }
  },
  data () {
    return {
      // 新增表单数据
      formData: {
        directoryName: '', // 目录名称
        subjectID: '' // 学科id
      },
      // 表单校验
      rules: {
        subjectName: [
          { required: true, message: '请选择所属学科', trigger: 'blur' }
        ], // 学科名称
        subjectID: [
          { required: true, message: '请选择所属学科', trigger: 'blur' }
        ], // 学科id
        directoryName: [
          { required: true, message: '请输入目录名称', trigger: 'blur' }
        ]// 目录名称校验
      },
      selectList: {}
    }
  },
  created () {
    // 获取到简单列表的数据
    this.getSelectList()
  },
  computed: {
    // 弹窗标题显示
    titles () {
      return this.currentId ? '编辑目录' : '新增目录'
    }
  },
  methods: {
    // 关闭对话框
    close () {
      // 清空表单
      this.$refs.formData.resetFields()
      this.$emit('update:showDialog', false)
    },
    // 点击确认按钮
    subitClick () {
      // 表单兜底校验
      this.$refs.formData.validate(async (valid) => {
        if (valid) {
          if (this.currentId) {
            // 编辑
            this.formData = await update({ id: this.currentId, ...this.formData })
            // 提示用户
            this.$message.success('编辑目录成功')
          } else {
            // 调用添加目录的接口
            await add(this.formData)
            // 提示用户：新增成功
            this.$message.success('新增目录成功')
            // 通知父组件修改page的值等于1
            this.$emit('editpage', 1)
          }
          // 清空表单+关闭弹窗
          this.close()
          // 刷新列表
          this.$emit('getDirectoryList')
        }
      })
    },
    async getSelectList () {
      // 调用目录简单列表，拿到下拉框的数据并渲染到页面
      const { data } = await simple()
      // console.log(data)
      this.selectList = data
    },
    // 回显数据
    async getDirectDetail () {
      const { data } = await detail({ id: this.currentId, ...this.directList })
      console.log(data)
      this.formData.directoryName = data.directoryName
      this.formData.subjectID = data.subjectID
    }

  }
}
</script>

<style scoped lang="less"></style>
